<template>
  <div class="app-container">
    <div class="titleInfo">
      <el-image
        :src="'https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800'"
        style="width: 100px; vertical-align: middle"
        fit="fill"
      />
      <div class="carinfo">
        <p>车辆类型:{{ detailData[0].typeName }}</p>
        <p>
          车辆编号:{{ detailData[0].vehicleId
          }}<el-button type="text" v-copy="detailData[0].vehicleId" size="small">复制</el-button>
        </p>
      </div>
      <div class="carstatus">
        <span
          >状态:<span style="color: red">
            <span v-if="detailData[0].vehicleStatus == '1'">正常</span>
            <span v-else-if="detailData[0].vehicleStatus == '2'">维修中</span>
            <span v-else-if="detailData[0].vehicleStatus === '3'">报废</span></span
          ></span
        >
      </div>
    </div>
    <div class="baicInfo">
      <div>
        <div>基本信息</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            :data="detailData"
            style="width: 100%"
          >
            <el-table-column label="车辆编号/车牌号">
              <template #default="scope">{{ scope.row.vehicleId + "/" + scope.row.vehicleNumber }}</template>
            </el-table-column>
            <el-table-column label="车辆类型" prop="typeName" />
            <el-table-column label="所属公司" prop="company" />
            <el-table-column label="所需驾驶证类型" prop="driverLicenseTypeName" />
            <el-table-column label="状态" prop="vehicleStatus" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>当前配送员</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            :data="currDelivery"
            style="width: 100%"
          >
            <el-table-column label="关联时间段" prop="startTime" />
            <el-table-column label="配送员" prop="deliveryName" />
            <el-table-column label="验车照片" prop="vehicleExaminationFrontalView">
              <template #default="scope">
                <el-image
                  :src="scope.row.vehicleExaminationFrontalView"
                  style="width: 100px; vertical-align: middle"
                  fit="fill"
                  @click="handleView"
                />
              </template>
            </el-table-column>
            <el-table-column label="验车备注" prop="vehicleExaminationRemark" />
            <el-table-column label="驿站站长" prop="stationName" />
            <el-table-column label="退车备注" prop="vehicleRefundRemark" />
          </el-table>
        </div>
        <div>历史配送员</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            :data="historyDelivery"
            style="width: 100%"
          >
            <el-table-column label="关联时间段" prop="startTime" />
            <el-table-column label="配送员" prop="fullName" />
            <el-table-column label="验车照片" prop="vehicleExaminationFrontalView">
              <template #default="scope">
                <el-image
                  :src="scope.row.vehicleExaminationFrontalView"
                  style="width: 100px; vertical-align: middle"
                  fit="fill"
                  @click="handleView"
                />
              </template>
            </el-table-column>
            <el-table-column label="验车备注" prop="vehicleExaminationRemark" />
            <el-table-column label="驿站站长" prop="stationName" />
            <el-table-column label="退车照片" prop="vehicleRefundFrontalView" />
            <el-table-column label="退车备注" prop="vehicleRefundRemark" />
          </el-table>
        </div>
        <div>报修信息</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            :data="repairInfo"
            style="width: 100%"
          >
            <el-table-column label="报修时间" prop="repairTime" />
            <el-table-column label="报修人" prop="repairUser" />
            <el-table-column label="报修内容" prop="repairInfo" />
            <el-table-column label="报修图片" prop="attachmentList">
              <template #default="scope">
                <el-image
                  :src="scope.row.attachmentList[0].attachmentUrl"
                  style="width: 100px; vertical-align: middle"
                  fit="fill"
                  @click="handleView"
                />
              </template>
            </el-table-column>
            <el-table-column label="处理结果" prop="processingDesc" />
            <el-table-column label="处理时间" prop="processingTime" />
            <el-table-column label="处理人" prop="processingUser" />
            <el-table-column label="备注" prop="remark" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="centerDialogVisible" title="修改车辆信息" width="500" center>
    <div>
      <el-form :model="addForm" ref="refUpdateForm" :rules="addFormRules" label-width="100">
        <el-form-item prop="vehicleId" label="车辆编号">
          <el-input v-model="addForm.vehicleId" placeholder="请填写车辆编号"></el-input>
        </el-form-item>
        <el-form-item prop="vehicleIdentificationNumber" label="车架号">
          <el-input v-model="addForm.vehicleIdentificationNumber" placeholder="请填写车架号"></el-input>
        </el-form-item>
        <el-form-item prop="vehicleNumber" label="车牌号">
          <el-input v-model="addForm.vehicleNumber" placeholder="请填写车牌号"></el-input>
        </el-form-item>
        <el-form-item prop="vehicleType" label="车辆类型">
          <el-select v-model="addForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in TypeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="company" label="所属公司">
          <el-select v-model="addForm.company" placeholder="请选择所属公司">
            <el-option
              v-for="item in companyList"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateSubmit(refUpdateForm as FormInstance)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="tsx" setup name="CarDetils">
import { onMounted, reactive, ref } from "vue";
import { CarManage, CarType } from "@/api/interface/province/carManage";
import { CarDetailAPI, CarDeleteAPI, upadateCarAPI, getCarTypeListAPI } from "@/api/modules/province/carManageAPI";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { api as viewerApi } from "v-viewer";
import { Company } from "@/api/interface/province/organizationManage";
import { getCompanyListAPI } from "@/api/modules/province/organizMangeAPI";
const route = useRoute();
const router = useRouter();
const detailData = ref<CarManage.Detail[]>([]);
const currDelivery = ref<CarManage.CurrDelivery[]>([
  {
    deliveryName: "string",
    stationName: "string",
    vehicleExaminationStatus: 0,
    vehicleExaminationTime: "string",
    vehicleExaminationFrontalView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationBackView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationLeftView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationRightView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationRemark: "string",
    vehicleRefundRemark: "string",
    vehicleRefundFrontalView: "string",
    vehicleRefundBackView: "string",
    vehicleRefundLeftView: "string",
    vehicleRefundRightView: "string",
    vehicleRefundTime: "string",
    createTime: "string"
  }
]);
const historyDelivery = ref<CarManage.HistoryDelivery[]>([
  {
    fullName: "string",
    stationName: "string",
    vehicleExaminationStatus: 0,
    vehicleExaminationTime: "string",
    vehicleExaminationFrontalView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationBackView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationLeftView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationRightView: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
    vehicleExaminationRemark: "string",
    vehicleRefundRemark: "string",
    vehicleRefundFrontalView: "string",
    vehicleRefundBackView: "string",
    vehicleRefundLeftView: "string",
    vehicleRefundRightView: "string",
    vehicleRefundTime: "string",
    createTime: "string"
  }
]);
const repairInfo = ref<CarManage.RepairInfo[]>([
  {
    id: 1,
    remark: "string",
    vehicleId: -2147483648,
    repairInfo: "string",
    repairTime: "CURRENT_TIMESTAMP",
    repairStatus: 1,
    repairUser: -2147483648,
    repairDesc: "string",
    processingDesc: "string",
    processingUser: -2147483648,
    processingTime: "2019-08-24T14:15:22.123Z",
    createTime: "2019-08-24T14:15:22.123Z",
    createBy: "string",
    attachmentList: [
      {
        attachmentType: 1,
        attachmentUrl: "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800"
      }
    ]
  }
]);
const images = ref<string[]>([
  "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
  "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
  "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800",
  "https://img0.baidu.com/it/u=3029360519,385877560&fm=253&fmt=auto&app=120&f=JPEG?w=1193&h=800"
]);
const centerDialogVisible = ref<boolean>(false);
const addForm = ref<CarManage.Update>({
  vehicleIdentificationNumber: "",
  vehicleNumber: ""
});
const refUpdateForm = ref<FormInstance>();
const addFormRules = reactive<FormRules>({
  vehicleType: [{ required: true, message: "请选择车辆类型", trigger: "change" }],
  vehicleIdentificationNumber: [{ required: true, message: "请填写车架号", trigger: "blur" }],
  vehicleId: [{ required: true, message: "请填写车辆编号", trigger: "blur" }]
});
const handleView = () => {
  console.log("执行了函数");
  viewerApi({
    images: images.value
  });
};
const handleDelete = (index: number, row: CarManage.Detail) => {
  ElMessageBox.confirm("是否确认修改该车辆信息？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      deteleCar(row.id);
    })
    .catch(() => {
      ElMessage.error("取消删除");
    });
};
const handleEdit = (row: CarManage.Detail) => {
  Object.assign(addForm.value, row);
  centerDialogVisible.value = true;
};
const getCarDetail = async (id: number) => {
  const { data, code } = await CarDetailAPI(id);
  if (code == "200" && data) {
    detailData.value.push(data.detail);
    currDelivery.value.push(data.currDelivery);
    historyDelivery.value = data.historyDelivery;
    repairInfo.value = data.repairInfo;
  }
};
const deteleCar = async (id: number) => {
  const { code, msg } = await CarDeleteAPI(id);
  if (code == "200") {
    ElMessage.success("删除成功");
    router.push({ path: "/provinceLevel/proCar/proCarManage/index" });
  } else {
    ElMessage.error("删除失败" + msg);
  }
};
const updateCar = async () => {
  const { code, msg } = await upadateCarAPI(addForm.value);
  if (code == "200") {
    ElMessage({
      type: "success",
      message: "修改成功!"
    });
    getCarDetail(Number(route.query.id));
    centerDialogVisible.value = false;
  } else {
    ElMessage.error(`修改失败,${msg}`);
  }
};
const handleUpdateSubmit = (elForm: FormInstance) => {
  elForm.validate((valid: boolean) => {
    if (valid) {
      console.log(addForm.value);
      // 发送请求
      updateCar();
    } else {
      ElMessage.error("请检查输入项");
    }
  });
};
let TypeList = ref<CarType.Row[]>([]);
const getCarTypeList = async () => {
  const { rows, code, msg } = await getCarTypeListAPI({
    pageNum: 1,
    pageSize: 10000,
    typeName: ""
  });
  if (code == "200" && rows) {
    TypeList.value = rows;
  } else {
    ElMessage.error(msg);
  }
};
const companyList = ref<Company.CompanyList[]>([]);
const getCompanyList = async () => {
  const { rows, code, msg, total } = await getCompanyListAPI({
    companyName: "",
    city: "",
    pageNum: 1,
    pageSize: 10,
    userId: JSON.parse(localStorage.getItem("userInfo") as string)?.userId
  });
  if (code == "200" && rows && total) {
    companyList.value = rows;
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getCarTypeList();
  getCompanyList();
  if (route.query.id != undefined) {
    getCarDetail(Number(route.query.id));
  } else {
    ElMessage.error("查询错误");
  }
});
</script>

<style lang="scss" scoped>
body {
  .app-container {
    padding: 10px;
    background-color: white;
  }

  font-size: 13px;
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
    .carinfo {
      display: inline-block;
      margin-left: 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
      p {
        margin: 10px;
        .el-button {
          margin-left: 5px;
        }
      }
    }
    .carstatus {
      display: inline-block;
      float: right;
      margin-right: -135px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;

      // margin-right:50px;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
}
::v-deep .el-form-item__label {
  font-size: 13px;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
